<template>
  <div class="page pb-100">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder :border="false">
      <template #left>
        <div class="fz-16">{{ $t('首页') }}</div>
      </template>
      <template #right>
        <lang-comp></lang-comp>
      </template>
    </van-nav-bar>

    <!-- 购物 -->
    <shop-comp v-if="tabIndex === 0"></shop-comp>

    <!-- 订单 -->
    <car-comp v-else-if="tabIndex === 1"></car-comp>

    <!-- 产出 -->
    <output-comp v-else-if="tabIndex === 2"></output-comp>

    <!-- 底部栏 -->
    <div class="footer p-15" style="background-color: #121212">
      <div class="box" style="padding: 5px 30px">
        <tabbar-comp
          @change="onTabChange"
          v-model:tabIndex="tabIndex"
        ></tabbar-comp>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, provide, computed } from 'vue'
import { useStore } from '@/store/index'
import { showError, toNumber } from 'js/utils'
import mitt from 'js/mitt'

import langComp from 'comps/lang.vue'
import tabbarComp from 'comps/tabbar.vue'
import shopComp from 'comps/shop.vue'
import carComp from 'comps/car.vue'
import outputComp from 'comps/output.vue'

defineOptions({
  name: 'cache',
})

const store = useStore()

// 余额
const balance = ref(0)
const pandax = ref(0)
const coupon = ref(0)
provide(
  'balance',
  computed(() => balance.value)
)
provide(
  'pandax',
  computed(() => pandax.value)
)
provide(
  'coupon',
  computed(() => coupon.value)
)

const tabIndex = ref(Number(localStorage.getItem('tabIndex') || '0'))

initApp()
mitt.on('refresh', initApp)

// 初始化App
async function initApp() {
  balance.value = await getAccountBalance()
  pandax.value = await getPandaxBalance()
  coupon.value = await getCouponBalance()
}

// 获取账户余额
function getAccountBalance() {
  return new Promise(async (resolve, reject) => {
    try {
      console.log('获取账户余额')
      const balance = await usdtContract.context.methods
        .balanceOf(fromAddress)
        .call()
      const balanceInBigNumber = toNumber(balance)
      console.log(`获取账户余额成功：${balanceInBigNumber}`)
      resolve(balanceInBigNumber)
    } catch (err) {
      showError('获取账户余额失败')
      console.error('获取账户余额失败')
      console.error(err)
    }
  })
}

// 获取Pandax余额
function getPandaxBalance() {
  return new Promise(async (resolve, reject) => {
    try {
      console.log('获取Pandax余额')
      const balance = await pandaxContract.context.methods
        .balanceOf(fromAddress)
        .call()
      const balanceInBigNumber = toNumber(balance)
      console.log(`获取Pandax余额成功：${balanceInBigNumber}`)
      resolve(balanceInBigNumber)
    } catch (err) {
      showError('获取Pandax余额失败')
      console.error('获取Pandax余额失败')
      console.error(err)
    }
  })
}

// 获取Coupon余额
function getCouponBalance() {
  return new Promise(async (resolve, reject) => {
    try {
      console.log('获取Coupon余额')
      const balance = await couponContract.context.methods
        .balanceOf(fromAddress)
        .call()
      const balanceInBigNumber = toNumber(balance)
      console.log(`获取Coupon余额成功：${balanceInBigNumber}`)
      resolve(balanceInBigNumber)
    } catch (err) {
      showError('获取Coupon余额失败')
      console.error('获取Coupon余额失败')
      console.error(err)
    }
  })
}

function onTabChange() {
  localStorage.setItem('tabIndex', tabIndex.value)
}
</script>

<style lang="scss" scoped>
.page {
  background: url('/page_bg.png') no-repeat center / cover;
}
</style>
